<template>
  <nav-bar />
  <view class="goods-edit-page">
    <!-- 顶部导航 -->
    <view class="nav-bar">
      <text class="nav-back" @click="onBack">&#8592;</text>
      <text class="nav-title">编辑商品</text>
      <text class="nav-delete" @click="onDelete">删除</text>
    </view>

    <!-- 多图横向滚动 -->
    <scroll-view 
      class="goods-img-list-horizontal" 
      scroll-x 
      :scroll-with-animation="true"
      :enhanced="true"
      :show-scrollbar="false"
      :bounces="true"
      @touchstart="onTouchStart"
      @touchmove="onTouchMove"
      @touchend="onTouchEnd"
    >
      <view class="img-list-row">
        <view class="img-box-horizontal" v-for="(img, idx) in form.images" :key="img.id">
          <image class="goods-img-horizontal" :src="fullImgUrl(img.image)" mode="aspectFill" @click="onPreviewImg(idx)" />
          <view class="img-delete-horizontal" @click="onImgDelete(img)">
            <text class="delete-icon">&#10006;</text>
          </view>
        </view>
        <!-- 上传按钮 -->
        <view class="img-box-horizontal add-img-horizontal" @click="onAddImg">
          <text class="add-icon-horizontal">+</text>
        </view>
      </view>
    </scroll-view>

    <!-- 商品ID显示 -->
    <view class="product-id-section">
      <text class="product-id-label">商品ID：</text>
      <view class="product-id-value-wrap">
        <view class="input-scan-row">
          <input 
            type="text" 
            v-model="form.product_id" 
            class="product-id-input" 
            placeholder="请输入商品ID"
            :focus="inputFocused"
            @focus="inputFocused = true"
            @blur="inputFocused = false"
          />
          <button class="btn-scan" @click="onScanCode">
            <text class="iconfont icon-saoma"></text>
          </button>
        </view>
        <text class="input-tip">商品ID只能包含英文、数字、下划线和-</text>
      </view>
    </view>

    <!-- 商品表单 -->
    <view class="form-section">
      <view class="form-item">
        <view class="label">商品名称</view>
        <input class="value-input" v-model="form.name" placeholder="请输入" />
      </view>
      <view class="form-item required">
        <view class="label">售价</view>
        <view class="value-row">
          <input class="value-input" v-model="form.price" placeholder="请输入" type="number" />
          <text class="unit">元</text>
        </view>
      </view>
      <view class="form-item required">
        <view class="label">进货价</view>
        <view class="value-row">
          <input class="value-input" v-model="form.purchase_price" placeholder="请输入" type="number" />
          <text class="unit">元</text>
        </view>
      </view>
      <view class="form-item">
        <view class="label">库存</view>
        <view class="value-row">
          <input class="value-input" v-model="form.stock" placeholder="请输入" type="number" @input="onStockChange" />
          <text class="unit">个</text>
        </view>
      </view>
      <view class="form-item">
        <view class="label">货架数量</view>
        <view class="value-row">
          <input class="value-input" v-model="form.shelf_number" placeholder="请输入" type="number" @input="onShelfNumberChange" />
          <text class="unit">个</text>
        </view>
      </view>
      <view class="form-item">
        <view class="label">仓库数量</view>
        <view class="value-row">
          <input class="value-input" v-model="form.warehouse_number" placeholder="请输入" type="number" @input="onWarehouseNumberChange" />
          <text class="unit">个</text>
        </view>
      </view>
      <view class="form-item required">
        <view class="label">上架员</view>
        <view class="value-row">
          <text class="value-text">{{ userInfo?.username || '-' }}</text>
        </view>
      </view>
      <view class="form-item required">
        <view class="label">状态</view>
        <picker class="value-picker" :range="statusList" range-key="name" @change="onStatusChange">
          <view class="picker-value">{{ selectedStatus ? selectedStatus.name : '请选择' }}</view>
        </picker>
      </view>
      <view class="form-item">
        <view class="label">描述</view>
        <view class="value-row description-preview">
          <text class="description-text">{{ form.description || '请输入' }}</text>
          <text class="arrow">></text>
        </view>
      </view>
      <!-- 添加兄弟商品管理按钮 -->
      <view class="form-item" @click="showBrotherProductsPopup">
        <view class="label">兄弟商品</view>
        <view class="value-row">
          <text class="value-text">管理兄弟商品</text>
          <text class="arrow">></text>
        </view>
      </view>
    </view>

    <!-- 描述弹窗 -->
    <uni-popup ref="descriptionPopup" type="center">
      <view class="description-popup">
        <view class="popup-header">
          <text class="popup-title">商品描述</text>
          <text class="popup-close" @click="closeDescriptionPopup">×</text>
        </view>
        <view class="popup-content">
          <textarea 
            class="description-textarea" 
            v-model="form.description" 
            placeholder="请输入商品描述"
            :maxlength="1000"
            show-confirm-bar="false"
          />
          <view class="word-count">{{ form.description.length }}/1000</view>
        </view>
        <view class="popup-footer">
          <button class="confirm-btn" @click="closeDescriptionPopup">确定</button>
        </view>
      </view>
    </uni-popup>

    <!-- 底部按钮 -->
    <view class="footer-bar">
      <button class="save-btn" @click="onSave">保存</button>
    </view>

    <!-- 自定义消息框组件 -->
    <message-box
      v-if="showMsgBox"
      v-model="showMsgBox"
      :title="msgBoxTitle"
      :content="msgBoxContent"
      :showCancel="msgBoxShowCancel"
      :confirmText="msgBoxConfirmText"
      :cancelText="msgBoxCancelText"
      @confirm="onMsgBoxConfirm"
      @cancel="onMsgBoxCancel"
    />

    <!-- 自定义 Toast 组件 -->
    <toast
      v-if="showToast"
      v-model="showToast"
      :content="toastContent"
      :type="toastType"
      :duration="toastDuration"
    />

    <!-- 兄弟商品管理弹窗 -->
    <uni-popup ref="brotherProductsPopup" type="center">
      <view class="brother-products-popup">
        <view class="popup-header">
          <text class="popup-title">管理兄弟商品</text>
          <text class="popup-close" @click="closeBrotherProductsPopup">×</text>
        </view>
        <view class="popup-content">
          <!-- 搜索栏 -->
          <view class="search-bar">
            <input 
              type="text" 
              v-model="brotherSearchText" 
              placeholder="搜索商品..." 
              class="search-input"
              @input="onBrotherSearch"
            />
            <button class="btn-add-brother" @click="showAddBrotherPopup">
              <text class="add-icon">+</text>
              <text>添加兄弟商品</text>
            </button>
          </view>
          
          <!-- 兄弟商品列表 -->
          <scroll-view 
            class="brother-list" 
            scroll-y 
            :style="{ height: '400rpx' }"
          >
            <view 
              v-for="brother in brotherProducts" 
              :key="brother.id" 
              class="brother-item"
            >
              <image 
                class="brother-image" 
                :src=" brother.images && brother.images.length > 0 ? fullImgUrl(brother.images[0].image) : '/static/images/default-product.png'" 
                mode="aspectFill"
              />
              <view class="brother-info">
                <text class="brother-name">{{ brother.name }}</text>
                <text class="brother-price">￥{{ brother.price }}</text>
                <text class="brother-stock">库存: {{ brother.stock }}</text>
                <text class="brother-status" :class="brother.status === 1 ? 'status-normal' : 'status-off'">
                  {{ brother.status === 1 ? '正常' : '下架' }}
                </text>
              </view>
              <button class="btn-remove" @click="removeBrotherProduct(brother.product_id)">
                移除
              </button>
            </view>
          </scroll-view>
        </view>
      </view>
    </uni-popup>

    <!-- 添加兄弟商品弹窗 -->
    <uni-popup ref="addBrotherPopup" type="center">
      <view class="add-brother-popup">
        <view class="popup-header">
          <text class="popup-title">添加兄弟商品</text>
          <text class="popup-close" @click="closeAddBrotherPopup">×</text>
        </view>
        <view class="popup-content">
          <!-- 搜索栏 -->
          <view class="search-bar">
            <view class="search-input-wrap">
              <text class="search-icon">🔍</text>
              <input 
                type="text" 
                v-model="availableSearchText" 
                placeholder="搜索商品名称..." 
                class="search-input"
                @input="onAvailableSearch"
              />
              <text class="clear-icon" v-if="availableSearchText" @click="availableSearchText = ''">×</text>
            </view>
          </view>
          
          <!-- 可选商品列表 -->
          <scroll-view 
            class="available-list" 
            scroll-y 
            :style="{ height: '400rpx' }"
          >
            <view 
              v-for="product in availableProducts" 
              :key="product.id" 
              class="available-item"
            >
              <image 
                class="product-image" 
                :src="product.images && product.images.length > 0 ? fullImgUrl(product.images[0].image) : '/static/images/default-product.png'" 
                mode="aspectFill"
              />
              <view class="product-info">
                <text class="product-name">{{ product.name }}</text>
                <view class="product-meta">
                  <text class="product-price">￥{{ product.price }}</text>
                  <text class="product-stock">库存: {{ product.stock }}</text>
                  <text class="product-status" :class="product.status === 1 ? 'status-normal' : 'status-off'">
                    {{ product.status === 1 ? '正常' : '下架' }}
                  </text>
                </view>
              </view>
              <button 
                class="btn-add" 
                :class="{ 'btn-added': isProductSelected(product) }"
                @click="toggleProductSelection(product)"
              >
                {{ isProductSelected(product) ? '已选择' : '选择' }}
              </button>
            </view>
            <!-- 空状态提示 -->
            <view v-if="availableProducts.length === 0" class="empty-state">
              <text class="empty-text">暂无可选商品</text>
            </view>
          </scroll-view>
          
          <!-- 底部按钮 -->
          <view class="popup-footer">
            <button class="btn-cancel" @click="closeAddBrotherPopup">取消</button>
            <button class="btn-confirm" @click="addSelectedBrotherProducts">确定</button>
          </view>
        </view>
      </view>
    </uni-popup>
  </view>

  <!-- 图片预览弹窗 -->
  <template v-if="showImgPreview">
    <view class="img-preview-mask" @click.self="showImgPreview = false">
      <swiper class="img-preview-swiper" :current="previewImgIndex" circular @change="onPreviewSwiperChange">
        <swiper-item v-for="(img, idx) in form.images" :key="img.id">
          <image class="img-preview-img" :src="fullImgUrl(img.image)" mode="aspectFit" />
        </swiper-item>
      </swiper>
      <view class="img-preview-indicator">
        {{ previewImgIndex + 1 }} / {{ form.images.length }}
      </view>
      <view class="img-preview-close" @click="showImgPreview = false">×</view>
    </view>
  </template>
</template>

<script setup>
import { ref, watch, computed, defineProps } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { IntranetConfig, UserConfig } from '@/static/js/config'
import MessageBox from '@/components/message-box/message-box.vue'
import Toast from '@/components/toast/toast.vue'


// 定义 props
const props = defineProps({
  id: {
    type: [String, Number],
    required: true
  }
})

// 获取用户信息
const userInfo = computed(() => UserConfig.getUserInfo())

// Toast 相关
const showToast = ref(false)
const toastContent = ref('')
const toastType = ref('')
const toastDuration = ref(2000)
let toastTimer = null

function showCustomToast(content, type = '', duration = 2000) {
  toastContent.value = content
  toastType.value = type
  toastDuration.value = duration
  showToast.value = true
  if (toastTimer) clearTimeout(toastTimer)
  toastTimer = setTimeout(() => {
    showToast.value = false
    toastTimer = null
  }, duration)
}

// 检查权限
function checkPermission() {
  if (!userInfo.value) {
    showCustomToast('请先登录', 'error')
    setTimeout(() => {
      uni.reLaunch({
        url: '/pages/login/login'
      })
    }, 1500)
    return false
  }

  if (userInfo.value.is_superuser !== 1 && userInfo.value.is_superuser !== 2) {
    showCustomToast('您没有编辑商品的权限', 'error')
    setTimeout(() => {
      uni.navigateBack()
    }, 1500)
    return false
  }

  return true
}

const form = ref({
  id: '',
  name: '',
  price: '',
  purchase_price: '',
  stock: '',
  shelf_number: '',
  warehouse_number: '',
  description: '',
  images: [],
  isModified: false,
  status: 1,
  shelf_staff: userInfo.value?.id || ''
})

// 保存初始数据用于比较
const initialFormData = ref(null)

function checkFormModified() {
  if (!initialFormData.value) return false
  
  // 比较当前表单数据与初始数据
  const currentData = JSON.stringify({
    name: form.value.name,
    price: form.value.price,
    purchase_price: form.value.purchase_price,
    stock: form.value.stock,
    description: form.value.description,
    images: form.value.images
  })
  
  const initialData = JSON.stringify({
    name: initialFormData.value.name,
    price: initialFormData.value.price,
    purchase_price: initialFormData.value.purchase_price,
    stock: initialFormData.value.stock,
    description: initialFormData.value.description,
    images: initialFormData.value.images
  })
  
  form.value.isModified = currentData !== initialData
}

// 监听表单数据变化
watch(() => form.value, () => {
  checkFormModified()
}, { deep: true })

function fullImgUrl(path) {
  // 适配后端/media/路径
  if (!path) return ''
  if (path.startsWith('http')) return path
  return IntranetConfig.domain.replace(/\/$/, '') + path
}

// 状态列表
const statusList = ref([
  { id: 1, name: '正常' },
  { id: 2, name: '下架' }
])
const selectedStatus = ref(null)

// 状态选择事件
function onStatusChange(e) {
  const index = e.detail.value
  selectedStatus.value = statusList.value[index]
  form.value.status = selectedStatus.value.id
}

onLoad((options) => {
  // 检查权限
  if (!checkPermission()) return

  // 获取所有商品列表
  getAllProducts()

  // 获取商品详情
  uni.request({
    url: IntranetConfig.domain + 'api/product/get_product/' + (props.id || options.id),
    method: 'GET',
    header: IntranetConfig.headers,
    success: (res) => {
      let data = res.data.data
      // 兼容 images 字段
      form.value = {
        ...data,
        images: data.images || [],
        isModified: false,
        shelf_staff: userInfo.value.id // 使用当前用户ID
      }
      // 初始化状态选择器
      selectedStatus.value = statusList.value.find(item => item.id === data.status) || statusList.value[0]
      // 保存初始数据
      initialFormData.value = JSON.parse(JSON.stringify({
        name: data.name,
        price: data.price,
        purchase_price: data.purchase_price,
        stock: data.stock,
        description: data.description,
        images: data.images || [],
        status: data.status
      }))
    }
  })
})

// 消息框相关
const showMsgBox = ref(false)
const msgBoxTitle = ref('')
const msgBoxContent = ref('')
const msgBoxShowCancel = ref(true)
const msgBoxConfirmText = ref('确定')
const msgBoxCancelText = ref('取消')
let msgBoxCallback = null

function openMsgBox({ title = '', content = '', showCancel = true, confirmText = '确定', cancelText = '取消', callback = null }) {
  msgBoxTitle.value = title
  msgBoxContent.value = content
  msgBoxShowCancel.value = showCancel
  msgBoxConfirmText.value = confirmText
  msgBoxCancelText.value = cancelText
  msgBoxCallback = callback
  showMsgBox.value = true
}
function onMsgBoxConfirm() {
  if (msgBoxCallback) msgBoxCallback(true)
}
function onMsgBoxCancel() {
  if (msgBoxCallback) msgBoxCallback(false)
}

function onImgDelete(img) {
  openMsgBox({
    title: '确认删除',
    content: '确定要删除这张图片吗？',
    showCancel: true,
    confirmText: '确定',
    cancelText: '取消',
    callback: (confirm) => {
      if (confirm) {
        uni.showLoading({ title: '删除中...', mask: true })
        uni.request({
          url: IntranetConfig.domain + 'api/product/delete_product_image/' + img.id + '/',
          method: 'DELETE',
          header: IntranetConfig.headers,
          success: (res) => {
            if (res.data.code === 200) {
              // 从图片列表移除
              form.value.images = form.value.images.filter(item => item.id !== img.id)
              showCustomToast('删除成功', 'success')
            } else {
              showCustomToast(res.data.msg || '删除失败', 'error')
            }
          },
          fail: () => {
            showCustomToast('网络错误', 'error')
          },
          complete: () => {
            uni.hideLoading()
          }
        })
      }
    }
  })
}

function onAddImg() {
  // 选择图片
  uni.chooseImage({
    count: 9 - form.value.images.length,
    success: (res) => {
      const tempFilePaths = res.tempFilePaths
      if (!tempFilePaths || tempFilePaths.length === 0) return
      // 上传图片到服务器
      uni.showLoading({ title: '上传中...', mask: true })
      const uploadPromises = tempFilePaths.map(imagePath => {
        return new Promise((resolve, reject) => {
          const uploadTask = uni.uploadFile({
            url: IntranetConfig.domain + `api/product/upload_product_image/${form.value.id}/`,
            filePath: imagePath,
            fileType: 'image',
            name: 'image',
            formData: {
              product: form.value.id.toString()
            },
            header: {
              // ...IntranetConfig.headers
              // 不要设置 content-type
            },
            success: (res) => {
              try {
                const data = JSON.parse(res.data)
                if (data.code === 200) {
                  resolve(data.data)
                } else {
                  reject(new Error(data.msg))
                }
              } catch (e) {
                reject(new Error('解析响应数据失败'))
              }
            },
            fail: (err) => {
              reject(new Error(err.errMsg || '上传失败'))
            }
          })
          uploadTask.onProgressUpdate((res) => {
            console.log('上传进度：', res.progress)
          })
        })
      })
      Promise.all(uploadPromises)
        .then((uploadedImages) => {
          // 上传成功后刷新图片列表
          // 重新获取商品详情，或直接追加图片
          form.value.images = form.value.images.concat(uploadedImages)
          showCustomToast('上传成功', 'success')
        })
        .catch((error) => {
          console.error('图片上传错误：', error)
          showCustomToast(error.message || '上传失败', 'error')
        })
        .finally(() => {
          uni.hideLoading()
        })
    }
  })
}
function onBack() { 
  // 检查表单是否有修改
  if (form.value.isModified) {
    openMsgBox({
      title: '提示',
      content: '您有未保存的修改，确定要离开吗？',
      showCancel: true,
      confirmText: '确定',
      cancelText: '取消',
      callback: (confirm) => {
        if (confirm) {
          uni.navigateBack()
        }
      }
    })
  } else {
    uni.navigateBack()
  }
}
function onDelete() { 
  openMsgBox({
    title: '确认删除',
    content: '确定要删除这个商品吗？删除后无法恢复。',
    showCancel: true,
    confirmText: '确定',
    cancelText: '取消',
    callback: (confirm) => {
      if (confirm) {
        // 显示加载提示
        uni.showLoading({
          title: '删除中...',
          mask: true
        })
        // 调用删除接口
        uni.request({
          url: IntranetConfig.domain + 'api/product/delete_product/' + form.value.id + '/',
          method: 'DELETE',
          header: IntranetConfig.headers,
          success: (res) => {
            if (res.data.code === 200) {
              showCustomToast('删除成功', 'success')
              // 返回上一页
              setTimeout(() => {
                uni.navigateBack()
              }, 1500)
            } else {
              showCustomToast(res.data.msg || '删除失败', 'error')
            }
          },
          fail: () => {
            showCustomToast('网络错误', 'error')
          },
          complete: () => {
            uni.hideLoading()
          }
        })
      }
    }
  })
}

// 记录最后一次修改的字段
let lastModifiedField = ''

// 库存变化时
function onStockChange() {
  if (lastModifiedField === 'stock') {
    const stock = parseInt(form.value.stock) || 0
    const shelfNumber = parseInt(form.value.shelf_number) || 0
    const warehouseNumber = parseInt(form.value.warehouse_number) || 0
    
    // 如果货架数量已填写，则自动计算仓库数量
    if (shelfNumber > 0) {
      form.value.warehouse_number = Math.max(0, stock - shelfNumber).toString()
    }
    // 如果仓库数量已填写，则自动计算货架数量
    else if (warehouseNumber > 0) {
      form.value.shelf_number = Math.max(0, stock - warehouseNumber).toString()
    }
  }
}

// 货架数量变化时
function onShelfNumberChange() {
  lastModifiedField = 'shelf'
  const stock = parseInt(form.value.stock) || 0
  const shelfNumber = parseInt(form.value.shelf_number) || 0
  
  // 自动计算仓库数量
  form.value.warehouse_number = Math.max(0, stock - shelfNumber).toString()
}

// 仓库数量变化时
function onWarehouseNumberChange() {
  lastModifiedField = 'warehouse'
  const stock = parseInt(form.value.stock) || 0
  const warehouseNumber = parseInt(form.value.warehouse_number) || 0
  
  // 自动计算货架数量
  form.value.shelf_number = Math.max(0, stock - warehouseNumber).toString()
}

const inputFocused = ref(false)

// 扫码功能
function onScanCode() {
  uni.scanCode({
    scanType: ['barCode', 'qrCode'],
    success: (res) => {
      if (res.result) {
        form.value.product_id = res.result
      } else if (res.code) {
        form.code = res.code
      }
    },
    fail: (err) => {
      showCustomToast('扫码失败', 'error')
    }
  })
}

// 验证商品ID格式
function validateProductId(id) {
  return /^[a-zA-Z0-9_-]+$/.test(id)
}

async function onSave() { 
  // 检查权限
  if (!checkPermission()) return

  // 表单验证
  if (!form.value.name) {
    showCustomToast('请输入商品名称', 'error')
    return
  }
  if (!form.value.price) {
    showCustomToast('请输入商品价格', 'error')
    return
  }
  if (!form.value.purchase_price) {
    showCustomToast('请输入商品进货价', 'error')
    return
  }

  // 验证进货价和售卖价的关系
  if (parseFloat(form.value.purchase_price) >= parseFloat(form.value.price)) {
    const result = await new Promise((resolve) => {
      openMsgBox({
        title: '价格确认',
        content: '进货价大于或等于售卖价，是否确认继续？',
        showCancel: true,
        confirmText: '确认',
        cancelText: '取消',
        callback: resolve
      })
    })
    if (!result) return
  }
  
  // 验证库存、货架数量和仓库数量的关系
  const stock = parseInt(form.value.stock) || 0
  const shelfNumber = parseInt(form.value.shelf_number) || 0
  const warehouseNumber = parseInt(form.value.warehouse_number) || 0

  if (stock < 0) {
    showCustomToast('库存不能为负数', 'error')
    return
  }

  if (shelfNumber < 0) {
    showCustomToast('货架数量不能为负数', 'error')
    return
  }

  if (warehouseNumber < 0) {
    showCustomToast('仓库数量不能为负数', 'error')
    return
  }

  if (shelfNumber + warehouseNumber !== stock) {
    showCustomToast('货架数量和仓库数量之和必须等于库存', 'error', 3000)
    return
  }
  
  // 验证商品ID格式
  if (form.value.product_id && !validateProductId(form.value.product_id)) {
    showCustomToast('商品ID只能包含英文、数字、下划线和-', 'error')
    return
  }
  
  // 准备请求数据
  const requestData = {
    name: form.value.name,
    price: form.value.price,
    purchase_price: form.value.purchase_price,
    stock: form.value.stock || 0,
    description: form.value.description || '',
    status: form.value.status || 1,
    shelf_staff: userInfo.value.id,
    shelf_number: parseInt(form.value.shelf_number) || 0,
    warehouse_number: parseInt(form.value.warehouse_number) || 0,
    product_id: form.value.product_id || '' // 添加商品ID到请求数据
  }

  // 数据验证
  if (isNaN(requestData.shelf_number) || isNaN(requestData.warehouse_number)) {
    showCustomToast('货架数量和仓库数量必须为数字', 'error')
    return
  }

  if (requestData.shelf_number < 0 || requestData.warehouse_number < 0) {
    showCustomToast('货架数量和仓库数量不能为负数', 'error')
    return
  }

  if (requestData.shelf_number + requestData.warehouse_number !== parseInt(requestData.stock)) {
    showCustomToast('货架数量和仓库数量之和必须等于库存', 'error', 3000)
    return
  }
  
  // 只有当 category 不为 null 时才添加到请求数据中
  if (form.value.category !== null) {
    requestData.category = form.value.category
  }
  
  // 只有当 category_sub 不为 null 时才添加到请求数据中
  if (form.value.category_sub !== null) {
    requestData.category_sub = form.value.category_sub
  }
  
  // 显示加载提示
  uni.showLoading({
    title: '保存中...',
    mask: true
  })
  
  // 调用更新接口
  uni.request({
    url: IntranetConfig.domain + 'api/product/update_product/' + form.value.id + '/',
    method: 'POST',
    header: IntranetConfig.headers,
    data: requestData,
    success: (res) => {
      if (res.data.code === 200) {
        // 隐藏加载提示
        uni.hideLoading()
        // 显示成功提示
        uni.showToast({
          title: '保存成功',
          icon: 'success',
          duration: 2000,
          mask: true
        })
        // 等待提示显示完成后再返回
        setTimeout(() => {
          uni.navigateBack({
            delta: 1,
            success: () => {
              // 通知上一页刷新数据
              uni.$emit('goodsUpdated', {
                id: form.value.id,
                type: 'update'
              })
            }
          })
        }, 2000)
      } else {
        uni.hideLoading()
        uni.showToast({
          title: res.data.msg || '保存失败',
          icon: 'error',
          duration: 2000
        })
      }
    },
    fail: (err) => {
      console.error('保存商品错误：', err)
      uni.hideLoading()
      uni.showToast({
        title: '网络错误，请稍后重试',
        icon: 'error',
        duration: 2000
      })
    }
  })
}

// 描述弹窗相关
const descriptionPopup = ref(null)

function showDescriptionPopup() {
  descriptionPopup.value.open()
}

function closeDescriptionPopup() {
  descriptionPopup.value.close()
}

// 图片预览相关
const previewImgIndex = ref(0)
const showImgPreview = ref(false)
function onPreviewImg(idx) {
  previewImgIndex.value = idx
  showImgPreview.value = true
}

function onPreviewSwiperChange(e) {
  previewImgIndex.value = e.detail.current
}

// 触摸事件处理
function onTouchStart(e) {
  // 可以在这里添加触摸开始的处理逻辑
}

function onTouchMove(e) {
  // 可以在这里添加触摸移动的处理逻辑
}

function onTouchEnd(e) {
  // 可以在这里添加触摸结束的处理逻辑
}

function copyProductId() {
  if (!form.value.product_id) return
  uni.setClipboardData({
    data: form.value.product_id,
    success: () => {
     // showCustomToast('已复制', 'success')
    },
    fail: () => {
      showCustomToast('复制失败', 'error')
    }
  })
}

// 兄弟商品相关数据
const brotherProductsPopup = ref(null)
const addBrotherPopup = ref(null)
const brotherSearchText = ref('')
const availableSearchText = ref('')
const allProducts = ref([])
const brotherProducts = ref([])
const availableProducts = ref([])
const selectedProducts = ref([])

// 获取所有商品列表
async function getAllProducts() {
  try {
    const res = await uni.request({
      url: IntranetConfig.domain + 'api/product/get_product_list/',
      method: 'GET',
      header: IntranetConfig.headers
    })
    
    if (res.data.code === 200) {
      allProducts.value = res.data.data
    } else {
      showCustomToast(res.data.msg || '获取商品列表失败', 'error')
    }
  } catch (error) {
    showCustomToast('网络错误', 'error')
  }
}

// 获取兄弟商品列表
async function getBrotherProducts() {
  if (!form.value.product_id) {
    showCustomToast('商品ID不存在', 'error')
    return
  }

  try {
    const res = await uni.request({
      url: IntranetConfig.domain + `api/product/brother/get_product_brother/${form.value.product_id}/`,
      method: 'GET',
      header: IntranetConfig.headers
    })
    
    if (res.data.code === 200) {
      brotherProducts.value = res.data.data
    } else {
      showCustomToast(res.data.msg || '获取兄弟商品列表失败', 'error')
    }
  } catch (error) {
    showCustomToast('网络错误', 'error')
  }
}

// 显示兄弟商品管理弹窗
async function showBrotherProductsPopup() {
  if (!form.value.product_id) {
    showCustomToast('商品ID不存在', 'error')
    return
  }

  // 重新获取商品列表和兄弟商品列表
  await Promise.all([
    getAllProducts(),
    getBrotherProducts()
  ])
  
  brotherProductsPopup.value.open()
}

// 关闭兄弟商品管理弹窗
function closeBrotherProductsPopup() {
  brotherProductsPopup.value.close()
}

// 显示添加兄弟商品弹窗
function showAddBrotherPopup() {
  // 过滤掉当前商品和已经是兄弟关系的商品
  availableProducts.value = allProducts.value.filter(product => {
    return product.id !== form.value.id && 
           product.product_id && 
           !brotherProducts.value.some(brother => brother.product_id === product.product_id)
  })
  selectedProducts.value = []
  addBrotherPopup.value.open()
}

// 关闭添加兄弟商品弹窗
function closeAddBrotherPopup() {
  addBrotherPopup.value.close()
}

// 搜索兄弟商品
function onBrotherSearch() {
  if (!brotherSearchText.value) {
    getBrotherProducts()
    return
  }
  
  brotherProducts.value = brotherProducts.value.filter(product => 
    product.name.toLowerCase().includes(brotherSearchText.value.toLowerCase())
  )
}

// 搜索可选商品
function onAvailableSearch() {
  if (!availableSearchText.value) {
    showAddBrotherPopup()
    return
  }
  
  availableProducts.value = allProducts.value.filter(product => 
    product.name.toLowerCase().includes(availableSearchText.value.toLowerCase()) &&
    product.id !== form.value.id &&
    product.product_id &&
    !brotherProducts.value.some(brother => brother.product_id === product.product_id)
  )
}

// 检查商品是否已被选择
function isProductSelected(product) {
  return selectedProducts.value.some(p => p.id === product.id)
}

// 切换商品选择状态
function toggleProductSelection(product) {
  const index = selectedProducts.value.findIndex(p => p.id === product.id)
  if (index === -1) {
    selectedProducts.value.push(product)
  } else {
    selectedProducts.value.splice(index, 1)
  }
}

// 添加选中的兄弟商品
async function addSelectedBrotherProducts() {
  if (selectedProducts.value.length === 0) {
    showCustomToast('请选择要添加的兄弟商品', 'error')
    return
  }

  uni.showLoading({ title: '添加中...', mask: true })

  try {
    const promises = selectedProducts.value.map(product => {
      const data = {
        product: form.value.product_id,
        brother_product: product.product_id
      }
      return uni.request({
        url: IntranetConfig.domain + 'api/product/brother/create_product_brother/',
        method: 'POST',
        header: IntranetConfig.headers,
        data
      })
    })

    await Promise.all(promises)
    showCustomToast('添加成功', 'success')
    closeAddBrotherPopup()
    getBrotherProducts()
  } catch (error) {
    showCustomToast('添加失败', 'error')
  } finally {
    uni.hideLoading()
  }
}

// 移除兄弟商品
async function removeBrotherProduct(brotherId) {
  if (!form.value.product_id) {
    showCustomToast('商品ID不存在', 'error')
    return
  }

  uni.showLoading({ title: '移除中...', mask: true })

  try {
    const res = await uni.request({
      url: IntranetConfig.domain + `api/product/brother/delete_product_brother/${form.value.product_id}/${brotherId}/`,
      method: 'DELETE',
      header: IntranetConfig.headers
    })
    
    if (res.data.code === 200) {
      showCustomToast('移除成功', 'success')
      getBrotherProducts()
    } else {
      showCustomToast(res.data.msg || '移除失败', 'error')
    }
  } catch (error) {
    showCustomToast('网络错误', 'error')
  } finally {
    uni.hideLoading()
  }
}
</script>

<style scoped lang="scss">
.goods-edit-page {
  background: #f8f9fa;
  min-height: 100vh;
  padding-bottom: 120rpx;
  font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
  overflow-x: hidden;
  max-width: 100vw;
  box-sizing: border-box;
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  height: 96rpx;
  background: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 0;
  z-index: 100;
  border-radius: 0 0 24rpx 24rpx;
  .nav-back { 
    color: #333; 
    font-size: 44rpx;
    width: 80rpx;
    height: 80rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s;
    &:active {
      background: rgba(0, 0, 0, 0.05);
    }
  }
  .nav-title { 
    flex: 1; 
    text-align: center; 
  font-size: 36rpx;
    font-weight: 600;
    color: #333;
  }
  .nav-delete {
    color: #ff7e2d;
    font-size: 30rpx;
  font-weight: 500;
    padding: 0 12rpx;
    border-radius: 8rpx;
    transition: background 0.2s;
    &:active {
      background: #fff6ed;
    }
  }
}

.goods-img-list-horizontal {
  width: 100vw;
  max-width: 100vw;
  overflow-x: auto;
  padding: 32rpx 16rpx 32rpx 16rpx;
  background: #fff;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  border-radius: 24rpx;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch; // 添加弹性滚动
  overscroll-behavior-x: contain; // 防止滚动传播
}

.img-list-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 8rpx 0;
  max-width: 100vw;
  box-sizing: border-box;
}

.img-box-horizontal {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  margin-right: 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s;
  &:active {
    transform: scale(0.98);
  }
  .goods-img-horizontal {
    width: 160rpx;
    height: 160rpx;
    border-radius: 16rpx;
    object-fit: cover;
  }
  .img-delete-horizontal {
    position: absolute;
    top: -16rpx;
    right: -16rpx;
    width: 48rpx;
    height: 48rpx;
    background: #fff;
    color: #ff7e2d;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32rpx;
    font-weight: bold;
    box-shadow: 0 4rpx 12rpx rgba(255, 126, 45, 0.18);
    z-index: 2;
    cursor: pointer;
    transition: all 0.2s;
    border: 2rpx solid #ff7e2d;
    .delete-icon {
      font-size: 28rpx;
      color: #ff7e2d;
      pointer-events: none;
    }
    &:active {
      transform: scale(0.9);
      background: #ff7e2d;
      color: #fff;
      .delete-icon { color: #fff; }
    }
  }
}

.add-img-horizontal {
  width: 160rpx;
  height: 160rpx;
  border-radius: 16rpx;
  border: 2rpx dashed #ff7e2d;
  background: #fff6ed;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s;
  &:active {
    transform: scale(0.98);
    background: darken(#fff6ed, 2%);
  }
  .add-icon-horizontal {
    font-size: 56rpx;
    color: #ff7e2d;
    font-weight: bold;
  }
}

.form-section {
  width: 100vw;
  max-width: 100vw;
  background: #fff;
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
  overflow: hidden;
  padding: 24rpx 16rpx;
  box-sizing: border-box;
  .form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 1rpx solid #f5f5f5;
    font-size: 30rpx;
    transition: all 0.3s;
    &:active {
      background: #fafafa;
    }
    &:last-child {
      border-bottom: none;
    }
    .label {
      color: #333;
      width: 180rpx;
      text-align: left;
      flex-shrink: 0;
      font-weight: 500;
    }
    .value-input {
      flex: 1;
      min-width: 0;
      border: none;
      background: transparent;
      font-size: 30rpx;
      color: #333;
      text-align: right;
      padding: 0;
      &::placeholder {
        color: #999;
      }
    }
    .value-picker {
      flex: 1;
      text-align: right;
      .picker-value {
        color: #333;
        font-size: 30rpx;
        &:empty::before {
          content: '请选择';
          color: #999;
        }
      }
    }
    .value-row {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      min-width: 0;
  }
    .unit {
      color: #666;
      font-size: 26rpx;
      margin-left: 8rpx;
    }
    .arrow {
      color: #999;
      font-size: 28rpx;
      margin-left: 8rpx;
  }
}
  .form-item.required .label:after {
    content: '*';
    color: #ff7e2d;
    margin-left: 4rpx;
  }
}

.description-preview {
  .description-text {
    flex: 1;
    color: #333;
    font-size: 30rpx;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 400rpx;
    &:empty::before {
      content: '请输入';
      color: #999;
    }
  }
}

.description-popup {
  width: 90vw;
  max-width: 600rpx;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 1rpx solid #f5f5f5;
    background: #fff;
    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    .popup-close {
      font-size: 40rpx;
      color: #999;
      padding: 16rpx;
      margin: -16rpx;
      border-radius: 50%;
      transition: all 0.3s;
      &:active {
        background: #f5f5f5;
    }
  }
  }
  .popup-content {
    padding: 32rpx;
    background: #fff;
    .description-textarea {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      height: 400rpx;
      font-size: 30rpx;
      line-height: 1.6;
      color: #333;
      padding: 24rpx;
      background: #f8f9fa;
      border-radius: 16rpx;
      border: 1rpx solid #eee;
      box-sizing: border-box;
      resize: none;
      &::placeholder {
        color: #999;
    }
    }
    .word-count {
      text-align: right;
      font-size: 24rpx;
      color: #999;
      margin-top: 16rpx;
    }
  }
  .popup-footer {
    padding: 24rpx 32rpx;
    border-top: 1rpx solid #f5f5f5;
    background: #fff;
    .confirm-btn {
      width: 100%;
      height: 88rpx;
      background: #ff7e2d;
      color: #fff;
      border: none;
      border-radius: 12rpx;
      font-size: 32rpx;
      font-weight: 500;
      transition: all 0.3s;
      &:active {
        transform: scale(0.98);
        background: darken(#ff7e2d, 5%);
    }
  }
  }
}

.footer-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
  box-shadow: 0 -4rpx 16rpx rgba(0, 0, 0, 0.05);
  .save-btn {
    width: 100%;
    height: 88rpx;
    background: #ff7e2d;
    color: #fff;
    border: none;
    border-radius: 12rpx;
    font-size: 32rpx;
    font-weight: 500;
    transition: all 0.3s;
    &:active {
      transform: scale(0.98);
      background: darken(#ff7e2d, 5%);
    }
  }
}

// 图片预览弹窗样式
.img-preview-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.85);
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.img-preview-swiper {
  width: 80vw;
  height: 80vw;
  max-width: 600rpx;
  max-height: 600rpx;
  border-radius: 18rpx;
  overflow: hidden;
  background: #222;
  box-shadow: 0 8rpx 32rpx rgba(0,0,0,0.18);
}
.img-preview-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.img-preview-close {
  position: absolute;
  top: 60rpx;
  right: 60rpx;
  font-size: 60rpx;
  color: #fff;
  background: rgba(0,0,0,0.25);
  border-radius: 50%;
  width: 72rpx;
  height: 72rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3100;
  cursor: pointer;
  transition: background 0.2s;
  &:active {
    background: #ff7e2d;
    color: #fff;
  }
}

.img-preview-indicator {
  position: absolute;
  left: 0; right: 0;
  bottom: 60rpx;
  text-align: center;
  color: #fff;
  font-size: 30rpx;
  font-weight: 500;
  text-shadow: 0 2rpx 8rpx rgba(0,0,0,0.25);
  z-index: 3100;
  letter-spacing: 2rpx;
}

.value-text {
  color: #333;
  font-size: 30rpx;
}

.product-id-section {
  background: #fff;
  padding: 24rpx 32rpx;
  margin: 0 32rpx 24rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
  
  .product-id-label {
    color: #666;
    font-size: 28rpx;
    font-weight: 500;
    margin-bottom: 16rpx;
    display: block;
  }
  
  .product-id-value-wrap {
    width: 100%;
    
    .input-scan-row {
      display: flex;
      align-items: center;
      gap: 18rpx;
      margin-bottom: 12rpx;
      
      .product-id-input {
        flex: 1;
        height: 90rpx;
        border: 2rpx solid #e5e5e5;
        border-radius: 16rpx;
        padding: 0 28rpx;
        font-size: 32rpx;
        background: #fafbfc;
        transition: border-color 0.2s, box-shadow 0.2s;
        outline: none;
        
        &::placeholder {
          color: #bbb;
        }
        
        &:focus {
          border-color: #ff7e2d;
          box-shadow: 0 2rpx 8rpx rgba(255, 126, 45, 0.10);
          background: #fff;
        }
      }
      
      .btn-scan {
        flex-shrink: 0;
        width: 90rpx;
        height: 90rpx;
        background: linear-gradient(90deg, #ffb86c 0%, #ff7e2d 100%);
        color: #fff;
        border: none;
        border-radius: 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2rpx 8rpx rgba(255, 126, 45, 0.10);
        transition: all 0.2s;
        padding: 0;
        
        .iconfont {
          font-size: 40rpx;
        }
        
        &:active {
          transform: scale(0.95);
          background: linear-gradient(90deg, #ff7e2d 0%, #ffb86c 100%);
        }
      }
    }
    
    .input-tip {
      font-size: 24rpx;
      color: #999;
      margin-top: 8rpx;
      display: block;
      line-height: 1.5;
    }
  }
}

// 兄弟商品管理弹窗样式
.brother-products-popup {
  width: 90vw;
  max-width: 600rpx;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 1px solid #f5f5f5;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .popup-close {
      font-size: 40rpx;
      color: #999;
      padding: 16rpx;
      margin: -16rpx;
      border-radius: 50%;
      transition: all 0.3s;
      
      &:active {
        background: #f5f5f5;
      }
    }
  }
  
  .popup-content {
    padding: 32rpx;
    
    .search-bar {
      display: flex;
      gap: 16rpx;
      margin-bottom: 24rpx;
      
      .search-input {
        flex: 1;
        height: 80rpx;
        border: 2rpx solid #e5e5e5;
        border-radius: 16rpx;
        padding: 0 24rpx;
        font-size: 28rpx;
        background: #fafbfc;
      }
      
      .btn-add-brother {
        display: flex;
        align-items: center;
        gap: 8rpx;
        padding: 0 24rpx;
        height: 80rpx;
        background: #ff7e2d;
        color: #fff;
        border: none;
        border-radius: 16rpx;
        font-size: 28rpx;
        
        .add-icon {
          font-size: 32rpx;
        }
        
        &:active {
          opacity: 0.9;
        }
      }
    }
    
    .brother-list {
      .brother-item {
        display: flex;
        align-items: center;
        gap: 16rpx;
        padding: 24rpx;
        border-bottom: 1px solid #f5f5f5;
        
        .brother-image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 12rpx;
          background: #f5f5f5;
          flex-shrink: 0;
        }
        
        .brother-info {
          flex: 1;
          min-width: 0;
          
          .brother-name {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 8rpx;
            display: block;
          }
          
          .brother-price {
            font-size: 26rpx;
            color: #ff7e2d;
            margin-right: 16rpx;
          }
          
          .brother-stock {
            font-size: 26rpx;
            color: #666;
            margin-right: 16rpx;
          }
          
          .brother-status {
            font-size: 24rpx;
            padding: 4rpx 12rpx;
            border-radius: 8rpx;
            
            &.status-normal {
              background: #e8fff3;
              color: #28c76f;
            }
            
            &.status-off {
              background: #ffe4e4;
              color: #ea5455;
            }
          }
        }
        
        .btn-remove {
          padding: 12rpx 24rpx;
          background: #ffe4e4;
          color: #ea5455;
          border: none;
          border-radius: 12rpx;
          font-size: 26rpx;
          
          &:active {
            opacity: 0.9;
          }
        }
      }
    }
  }
}

// 添加兄弟商品弹窗样式
.add-brother-popup {
  width: 90vw;
  max-width: 600rpx;
  background: #fff;
  border-radius: 24rpx;
  overflow: hidden;
  
  .popup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32rpx;
    border-bottom: 1px solid #f5f5f5;
    
    .popup-title {
      font-size: 32rpx;
      font-weight: 600;
      color: #333;
    }
    
    .popup-close {
      font-size: 40rpx;
      color: #999;
      padding: 16rpx;
      margin: -16rpx;
      border-radius: 50%;
      transition: all 0.3s;
      
      &:active {
        background: #f5f5f5;
      }
    }
  }
  
  .popup-content {
    padding: 32rpx;
    
    .search-bar {
      margin-bottom: 24rpx;
      
      .search-input-wrap {
        position: relative;
        display: flex;
        align-items: center;
        background: #f5f5f9;
        border-radius: 16rpx;
        padding: 0 24rpx;
        height: 80rpx;
        
        .search-icon {
          font-size: 32rpx;
          color: #999;
          margin-right: 16rpx;
        }
        
        .search-input {
          flex: 1;
          height: 80rpx;
          font-size: 28rpx;
          color: #333;
          background: transparent;
          border: none;
          
          &::placeholder {
            color: #999;
          }
        }
        
        .clear-icon {
          font-size: 32rpx;
          color: #999;
          padding: 16rpx;
          margin: -16rpx;
          border-radius: 50%;
          
          &:active {
            background: rgba(0, 0, 0, 0.05);
          }
        }
      }
    }
    
    .available-list {
      .available-item {
        display: flex;
        align-items: center;
        gap: 16rpx;
        padding: 24rpx;
        border-bottom: 1px solid #f5f5f5;
        
        .product-image {
          width: 120rpx;
          height: 120rpx;
          border-radius: 12rpx;
          background: #f5f5f5;
          flex-shrink: 0;
        }
        
        .product-info {
          flex: 1;
          min-width: 0;
          
          .product-name {
            font-size: 28rpx;
            color: #333;
            margin-bottom: 12rpx;
            display: block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          
          .product-meta {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 12rpx;
            
            .product-price {
              font-size: 26rpx;
              color: #ff7e2d;
              font-weight: 500;
            }
            
            .product-stock {
              font-size: 26rpx;
              color: #666;
            }
            
            .product-status {
              font-size: 24rpx;
              padding: 4rpx 12rpx;
              border-radius: 8rpx;
              
              &.status-normal {
                background: #e8fff3;
                color: #28c76f;
              }
              
              &.status-off {
                background: #ffe4e4;
                color: #ea5455;
              }
            }
          }
        }
        
        .btn-add {
          padding: 12rpx 24rpx;
          background: #f5f5f9;
          color: #697a8d;
          border: none;
          border-radius: 12rpx;
          font-size: 26rpx;
          white-space: nowrap;
          
          &.btn-added {
            background: #e8fff3;
            color: #28c76f;
          }
          
          &:active {
            opacity: 0.9;
          }
        }
      }
      
      .empty-state {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 200rpx;
        
        .empty-text {
          font-size: 28rpx;
          color: #999;
        }
      }
    }
    
    .popup-footer {
      display: flex;
      gap: 16rpx;
      margin-top: 32rpx;
      
      .btn-cancel {
        flex: 1;
        height: 88rpx;
        background: #f5f5f9;
        color: #697a8d;
        border: none;
        border-radius: 12rpx;
        font-size: 28rpx;
        
        &:active {
          opacity: 0.9;
        }
      }
      
      .btn-confirm {
        flex: 1;
        height: 88rpx;
        background: #ff7e2d;
        color: #fff;
        border: none;
        border-radius: 12rpx;
        font-size: 28rpx;
        
        &:active {
          opacity: 0.9;
        }
      }
    }
  }
}
</style> 